<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//默认黑色字体
@border-color:#E3E8EA;//默认边框
.textbox{
    .close{
        position: absolute;
        top:5px;
        right:10px;
        width: 20px;
        height: 20px;
        background:url('../images/assembly_close.png') no-repeat;
        cursor: pointer;
    }
    .btn{
        position: absolute;
        left:0;
        bottom: 11px;
        Button{
            width: 110px;
            height: 36px;
            padding: 0;
            text-align: center;
            line-height: 36px;
        }
        .styleOk{
            margin: 0 20px;
        }
        .styleClear{
            background-color: #F16473;
            border-color:#F16473;
        }

    }
    .name{
        line-height: 26px;
        font-size: 12px;
        color: @font-color;
    }
    .choosecolor{
        width: 154px;
        height: 20px;
        display: inline-block;
        margin-top: 3px;
        border: 1px solid @border-color;
        cursor: pointer;
        vertical-align: top;
    }
    .clearColor{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        background: #F6FAF9;
        border: 1px solid #E3E8EA;
        cursor: pointer;
        float: right;
    }
    .choosecolordiv{
        display: inline-block;
        width: 154px;
        height: 26px;
        line-height: 26px;
        background-color: @border-color;
        padding-left: 10px;
        color:@font-color;
    }
    .iconImg{
        .img{
            width: 60px;
            height: 60px;
            display: inline-block;
            vertical-align: bottom;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            display: inline-block;
            width: 44px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border: 1px solid #E3E8EA;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
        .sp1{
            border-color: @primary-color;
            color: @primary-color;
        }
    }
}
//动画

</style>
<style lang="less">
.textbox{
    .ivu-tabs{
        overflow: visible;
        .ivu-collapse-content{
           overflow: visible;
        }
        .ivu-slider-button-wrap .ivu-tooltip{
            display: none;
        }
        .ivu-tabs-tabpane{
            position: relative;
        }
    }
   .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
        height: 26px;
        line-height: 26px;
    }
    .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 26px;
        line-height: 26px
    }
    .ivu-select-single .ivu-select-selection{
        height: 26px;
    }
    .ivu-collapse-content{
        width: 100%;
        padding:  0 20px;
    }
    .ivu-row{
        margin-bottom: 13px;
    }
    .ivu-slider-wrap{
        margin: 0;
        
    }
    .ivu-slider-input .ivu-slider-wrap{
        width: 108px;
        float: left;
        margin: 0;
        margin-top: 3px;
    }
    .ivu-slider-input .ivu-input-number{
        margin: 0;
        height: 26px;
        line-height: 26px;
        width: 66px;
        .ivu-input-number-handler{
            height: 13px;
        }        
    }
    .ivu-input-number-input-wrap{
        height: 26px;
        .ivu-input-number-input{
            height: 26px;
            line-height: 26px;
            background-color: #F6FAF9;
        }
    }

    .ivu-collapse-content{

        .vue-color__sketch{
            position: absolute;
            top:30px;
            right: 0;
            z-index: 1;
        }
    }
}
</style>
<template>
	<div class="textbox" v-show="sjzhide" @click.stop="showtext2">
        <div class="close" @click="xqsjzdialogShow"></div>
        <h5 v-drag>其他组件设置</h5>
          <div class="btn">
            <Button type="warning" @click="xqsjzdialogShow" class="styleOk">确定</Button>
            <Button type="primary" class="styleClear" @click="clearstyleFn">清除样式</Button>
        </div>  
        <Tabs type="card" :animated="false">
            <Tab-pane label="时间轴" class="styles">
                <Collapse accordion>
                    <Panel name="1">
                        节点样式
                        <div slot="content">
                             <Row>
                                <Col span="6" class="name">
                                    图标图片
                                </Col>
                                <Col span="18" class="iconImg">
                                    <div class="img"><img :src="iconimg" /></div>                                                               
                                    <span class="sp1" @click="checkiconFn(1)">选择</span>
                                    <!-- <span>清空</span> -->
                                </Col>
                            </Row>
                        </div>                         
                    </Panel>                    
                    <Panel name="2">
                        轴线样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    尺寸
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['height'] " :min="0" :max="10"></Slider>
                                </Col>
                            </Row>
                            <!-- <Row>
                                <Col span="6" class="name">
                                    样式
                                </Col>
                                <Col span="18">
                                    <Select v-model="styleCss['borderStyle']" placeholder="请选择边框样式">
                                        <Option v-for="item in borderStyle" :value="item.label" :key="item">{{item.value}}</Option>
                                    </Select>
                                </Col>                                                                
                            </Row> -->
                             <Row>
                                <Col span="6" class="name">
                                    颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="bdcolor()" class="choosecolor" :style="'background-color:'+backgroundColor"></div>
                                    <!-- <div class="choosecolordiv">{{backgroundColor}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="bgFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxbd" @change-color="onChange2" v-model="backgroundColor" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Panel>
                </Collapse>
            </Tab-pane>           
        </Tabs>
    </div>
</template>
<script>
    import {Sketch} from 'vue-color';
    import { mapState } from 'vuex';
    import global from '../config/global'
    export default {
		data() {
				return {
                    sketchboxbd:false,//边框颜色选色框
                    styleCss:{
                        "height":0,
                        "backgroundColor":''
                    },//所有样式写个JSON格式
                    //borderStyle:[{"value":'无',"label":'none'},{"value":'直线',"label":'solid'},{"value":'点状线',"label":'dotted'},{"value":'破折线',"label":'dashed'}],
                    checkicon:"",
                    backgroundColor:'',//边框颜色

				}
			},
        props:["sjzhide",'checkiconFn','iconimg',"xqsjzdialogShow",'clearstyleFn'],
        components: {
            'sketch-picker': Sketch
        },
        computed: mapState({ user: state => state.user }),
        watch:{
            "styleCss":{
                handler:"styleCssFun",
                "deep":true //监听一个对象
            }
		},
		methods:{
            bgFn(){
                this.backgroundColor="";
                this.styleCss['backgroundColor'] = this.backgroundColor; 
            },
            showtext(obj){                
                this.styleCss = obj;
                obj.height=obj.height.substring(0,obj.height.length-2);//去掉高度后面的PX
                console.log(obj.height);
            },
            showtext2(){
                this.sketchboxBg=false;
                this.sketchboxFt=false;
                this.sketchboxbd=false;
            },
            onChange2(val){
                 this.backgroundColor = val.hex;
                 this.styleCss['backgroundColor'] = this.backgroundColor; 
            },
            bdcolor(){//
                this.sketchboxbd = true;
            },
            styleCssFun(){
                var a = Object.assign({},this.styleCss);
                a.height=parseInt(a.height)+"px"
                this.$emit("stylesjz",a);
            },
            
		}
    }
</script>